<template>
	<view class="search-container" :class="border ? 'border' : ''" :style="{ 'background-color': bgcolor }"  @click="searchHandler">
		<view class="search-wrap" :style="{ 'border-radius': radius + 'px', 'text-align': align }">
			<uni-icons type="search" size="17" class="search-icon"></uni-icons><text class="tip" :style="{ color: keywordsStyle }">{{ keywords }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-search",
		props: {
			bgcolor: {
				type: String,
				default: '#fff'
			},
			radius: {
				type: Number,
				default: 6
			},
			align: {
				type: String,
				default: 'left'
			},
			border: {
				type: Boolean,
				default: false
			},
			keywords: {
				type: String,
				default: '搜索单品'
			},
			keywordsStyle: {
				type: String,
				default: '#999'
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			searchHandler() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
.search-container {
	height: 50px;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 10px;
	.search-wrap {
		width: 100%;
		padding: 10rpx;
		border-radius: 6rpx;
		background-color: #eee;
		.search-icon {
			font-size: 16px;
			margin-left: 5px;
		}
		.tip {
			color: #999;
			font-size: 14px;
			margin-left: 20rpx;
		}
	}
	&.border {
		border-bottom: 1px solid #eee;
	}
}
</style>